<template>
  <div v-cloak>
    <el-tabs
      v-model="selectTab"
      type="card"
      :closable="selectTab!='home'&&selectTab!='menu'"
      @tab-remove="btnClose"
    >
      <el-tab-pane key="home" name="home">
        <span slot="label">
          <i class="el-icon-s-home"></i>
        </span>
        <el-row>
          <el-col :span="14">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>系统模块</span>
              </div>
              <div>
                <el-card class="index-box-card" v-for="x in blogs" :key="x.name">
                  <div slot="header" class="clearfix">
                    <el-link type="primary" @click="btnTolink(x)">{{x.name}}</el-link>
                    <br />
                    <span class="index-box-card-desc">{{x.description }}</span>
                  </div>
                  <!-- <div class="text item">{{x.description }}</div> -->
                </el-card>
              </div>
              <div>
                <el-card class="index-box-card" v-for="x in tips" :key="x.name">
                  <div slot="header" class="clearfix">
                    <span>{{x.name}}</span>
                  </div>
                  <div class="text item">{{x.description }}</div>
                </el-card>
              </div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>系统通知</span>
              </div>
              <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
            </el-card>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>待处理流程</span>
              </div>
              <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
            </el-card>
          </el-col>
          <el-col :span="10">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>我的消息</span>
              </div>
              <div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane key="menu" name="menu">
        <span slot="label">
          <i class="el-icon-menu"></i>
        </span>
        <el-row>
          <el-col :span="4">
            <!-- 左边树 -->
            <el-tree :data="menus" :props="defaultProps" @node-click="menuClick"></el-tree>
          </el-col>
          <el-col :span="20">
            <!-- 右边具体菜单 -->
            <div>
              <el-card class="index-box-card" v-for="x in currentMenu" :key="x.name">
                <div slot="header" class="clearfix">
                  <nuxt-link :to="x.src">{{x.label}}</nuxt-link>
                  <!-- <el-link type="primary" @click="btnTolink(x)">{{x.label}}</el-link> -->
                  <br />
                  <span class="index-box-card-desc">{{x.description }}</span>
                </div>
                <!-- {{x.description }} -->
                <!-- <div class="text item index-box-card-desc">{{x.description }}</div> -->
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        v-for="(item, index) in listTap"
        :key="index"
        :label="item.title"
        :name="item.name"
      >
        <!-- <iframe :src="item.srcs" class="el-tabs__iframe" :data-myname="item.name" :key="index"></iframe> -->

        <iframe
          :id="'iframs'+index"
          frameborder="0"
          scrolling="auto"
          :src="item.srcs"
          style="width:100%;margin:0;padding:0;"
          height="830"
        ></iframe>
      </el-tab-pane>
       <el-tab-pane key="logo" name="logo">
        <span slot="label">
          <i class="el-icon-s-home">Logo</i>
        </span>
<logo></logo>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import menu from "@/config/menus.js";
import Logo from "@/components/Logo"
export default {
  layout: "home",
  data() {
    return {
      selectTab: "home",
      blogs: [],
      tips: [
        { name: "代办事项", src: "", description: "" },
        { name: "已办事项", src: "", description: "" },
        { name: "未读文档", src: "", description: "" },
        { name: "未读消息", src: "", description: "" }
      ],
      listTap: [], //已打开的标签页
      currentMenu: [], //当前选中的菜单
      menus: menu,
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  mounted() {
    // console.log(menu);
    // console.log(this.api);
  },
  methods: {
    //关闭选项卡
    btnClose(c) {      
      let arr=[];
      let len=this.listTap.length;
      for(var i=0 ;i<len;i++){
        if(this.listTap[i].name!=c){
          arr.push(this.listTap[i])
        }
      }      
      this.listTap = arr;      
      this.selectTab = "menu";
    },
    //左边菜单点击
    menuClick(d) {
      if (d.menus && d.menus.length > 0) this.currentMenu = d.menus;
      // console.log(d);
    },
    //添加到选项卡
    btnTolink(c) {
      let name = c.name;
      let arr = this.listTap.whereFun(x => {
        return x.name == name;
      });
      if (arr.length == 0 && c.src !== "") {
        this.listTap.push({
          srcs: c.src,
          title: c.label,
          name: c.name
        });
      }
      if (c.src !== "") this.selectTab = c.name;
    }
  },components:{
    "Logo":Logo
  }
};
</script>

<style>
.el-tabs__header {
  margin: 0 !important;
}
</style>
